<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv">
        <div class="row-left">
          <div class="row-item">
            上级仓库:<el-select
              v-model="state.wareparent"
              placeholder="请选择上级仓库"
            >
              <el-option label="上级1" value="shanghai"></el-option>
              <el-option label="上级2" value="beijing"></el-option>
            </el-select>
          </div>
          <div class="row-item">
            仓库类型:<el-select
              v-model="state.warehouse_id"
              clearable
              @change="getOrderlist"
              placeholder="请选择仓库类型"
            >
              <template v-for="child in state.warehouse_arr" :key="child.id">
                <el-option :value="child.id" :label="child.name"></el-option>
              </template>
            </el-select>
          </div>
          <div class="row-item">
            绑定门店:<el-select
              v-model="state.bindstore"
              placeholder="请选择绑定门店"
            >
              <el-option label="门店1" value="003"></el-option>
              <el-option label="门店2" value="004"></el-option>
            </el-select>
          </div>
        </div>
        <div class="row-right">
          <el-button size="small" type="primary" @click="new_set_ware"
            >创建门店</el-button
          >
        </div>
      </div>
      <el-table max-height="80%" :data="state.storeData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="id" label="门店ID"> </el-table-column>
        <el-table-column prop="shop_name" label="门店名称"> </el-table-column>
        <el-table-column prop="clientno" label="门店编号"> </el-table-column>
        <el-table-column prop="customer_name" label="掌柜"> </el-table-column>
        <el-table-column prop="customer_phone" label="手机号">
        </el-table-column>
        <el-table-column prop="store_grade_name" label="门店等级">
        </el-table-column>
        <el-table-column prop="area" label="地区"> </el-table-column>
        <el-table-column prop="warehouse_name" label="发货仓库">
        </el-table-column>
        <el-table-column label="门店状态">
          <template v-slot="scope">
            <div @click="optionBtn(scope.row)">
              <el-switch
                v-model="scope.row.customer_status"
                :active-value="10"
                :inactive-value="1"
                active-text="开"
                inactive-text="关"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div class="optionCss">
<el-link type="primary"  @click.native.prevent="editRow(scope.row)">编辑</el-link>
            <el-link @click.native.prevent="detailRow(scope, state.tableData)">详情</el-link>
            <el-link type="danger" @click.native.prevent="deleteStore(scope.row)">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Page
        v-if="state.totalPage"
        @changePage="changePage"
        :totalPage="state.totalPage"
      ></Page>
      <!-- 创建门店 -->
      <el-dialog
        title="创建门店"
        v-model="state.new_dialogVisible"
        width="30%"
        center
      >
        <span>
          <el-form
            :model="state.set_form"
            :rules="state.rules"
            ref="form"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="合同编号" prop="contractNum">
              <el-input
                v-model="state.set_form.contractNum"
                placeholder="请输入合同编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="门店名称" prop="store_name">
              <el-input
                v-model="state.set_form.store_name"
                placeholder="请输入门店名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="门店编号" prop="store_serial">
              <el-input
                v-model="state.set_form.store_serial"
                placeholder="请输入门店编号"
              ></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="11">
                <el-form-item label="掌柜姓名" prop="shop_name">
                  <el-input
                    v-model="state.set_form.shop_name"
                    placeholder="请输入掌柜姓名"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="联系电话" prop="contact_phone">
                  <el-input
                    v-model="state.set_form.contact_phone"
                    placeholder="请输入联系电话"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="门店类型" prop="shop_type">
                  <el-select
                    v-model="state.set_form.shop_type"
                    placeholder="请选择门店类型"
                  >
                    <el-option label="加盟店" value="alliance"></el-option>
                    <el-option label="直营店" value="direct-sale"></el-option>
                    <el-option
                      label="测试账号"
                      value="test_account"
                    ></el-option>
                    <el-option label="加盟店" value="alliance"></el-option>
                    <el-option label="无编码" value="no_account"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="关联仓库" prop="ralate_ware">
                  <el-select
                    v-model="state.set_form.ralate_ware"
                    placeholder="请选择供应商"
                  >
                    <template v-for="item in state.ralate_ware" :key="item.id">
                      <el-option
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </template>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="客户经理" prop="run_manager_id">
                  <el-select
                    v-model="state.set_form.run_manager_id"
                    placeholder="请选择客户经理"
                  >
                    <template
                      v-for="item in state.run_manager_list"
                      :key="item.id"
                    >
                      <el-option
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </template>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="到期时间" prop="expire_date">
                   <el-date-picker
                    v-model="state.set_form.expire_date"
                    type="date"
                    @dateChange="dateChange"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="所在地区" prop="province">
              <el-col :span="6">
                <el-select
                  v-model="state.set_form.province"
                  placeholder="请选择省"
                  @change="changeProvince"
                >
                  <template
                    v-for="item in state.set_form.provinceArr"
                    :key="item.id"
                  >
                    <el-option :label="item.name" :value="item.id"></el-option>
                  </template>
                </el-select>
              </el-col>
              <el-col :span="2">-</el-col>
              <el-col :span="6">
                <el-select
                  v-model="state.set_form.city"
                  @change="changeCity"
                  placeholder="请选择市"
                >
                  <template
                    v-for="item in state.set_form.cityArr"
                    :key="item.id"
                  >
                    <el-option :label="item.name" :value="item.id"></el-option>
                  </template>
                </el-select>
              </el-col>
              <el-col :span="2">-</el-col>
              <el-col :span="6">
                <el-select
                  v-model="state.set_form.district"
                  placeholder="请选择区"
                >
                  <template
                    v-for="item in state.set_form.districtArr"
                    :key="item.id"
                  >
                    <el-option :label="item.name" :value="item.id"></el-option>
                  </template>
                </el-select>
              </el-col>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="create_ware()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import Page from "@/components/Pagination.vue";
import { ElNotification } from "element-plus";
export default {
    name:"store_manager",
  components: { Page },
  props: {},
  setup() {
    let form = ref("null");
    const { ctx } = getCurrentInstance();
    const router = useRouter();
    let state = reactive({
      common_option: "",
      new_dialogVisible: false,
      page: 1,
      totalPage: "",
      status: "",
      agent_id: "",
      manager_id: "",
      operation_id: "",
      area_id: "",
      warehouse_id: "",
      tag_id: "",
      store_type: "",
      enter_process_status: "",
      rank_by_time: "",
      storeData: [],
      wareparent: "",
      waretype: "",
      bindstore: "",
      ralate_ware: "",

      run_manager_list: "", //运营经理
      set_form: {
        contractNum: "",
        store_name: "",
        shop_name: "",
        contact_phone: "",
        shop_type: "",
        ralate_ware: "",
        ware_name: "",
        belong_man: "",
        customer_manager: "",
        run_manager_id: "",
        expire_date: "",
        province: "",
        provinceArr: [],
        city: "",
        cityArr: [],
        district: "",
        districtArr: [],
        contact_man: "",
        contact_phone: "",
        ware_address: "",
      },
      rules: {
        store_name: [
          { required: true, message: "请填写门店名称", trigger: "blur" },
        ],
        shop_name: [
          { required: true, message: "请选择掌柜姓名", trigger: "blur" },
        ],
        contact_phone: [
          { required: true, message: "联系电话", trigger: "blur" },
        ],
        shop_type: [{ required: true, message: "门店类型", trigger: "change" }],
        ralate_ware: [
          { required: true, message: "请填写关联供应商", trigger: "change" },
        ],
        run_manager_id: [
          { required: true, message: "请填写客户经理", trigger: "change" },
        ],
        expire_date: [
          { required: true, message: "请选择到期时间", trigger: "change" },
        ],
      },
      tableData: [],
    });
    // 关闭弹窗--并清除表单信息
    function close() {
      form.value.resetFields();
      state.new_dialogVisible = false;
    }
    //日期
    function dateChange(e) {
      if (e != null) {
         state.set_form.expire_date = e.current_date;
        }else{
          state.set_form.expire_date ="";
        }
    }
    // 查看详情
    function detailRow(idx, data) {
      console.log(idx.row.date);
      router.push({ path: "/store_detail", query: { id: idx.row.date } });
    }
    // 删除
    function deleteRow(index, rows) {
      rows.splice(index, 1);
    }
    // 打开新建弹窗
    function new_set_ware() {
      state.new_dialogVisible = true;
      state.common_option = "create";
    }
    // 门店状态操作
    function optionBtn(e) {
      console.log(e);
      console.log(e.customer_status);
      ctx.$http
        .post("/tanxiaji/customer/forbid/", {
          customer_id: e.id,
          change_status: e.customer_status,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
          }
        })
        .catch((err) => {
          getOrderlist();
          ElNotification.error(err);
        });
    }
    // 提交创建门店信息的表单
    function create_ware() {
      console.log(state.common_option);
      // 看看是否是创建还是编辑
      let item = state.set_form;
      let data = {
        shop_name: item.contact_man,
        phone: item.contact_phone,
        name: item.shop_name,
        limit_date: item.expire_date,
        manager: item.run_manager_id,
        province: item.province,
        city: item.city,
        district: item.district,
        serial: item.store_serial,
        contract_num: item.contractNum,
      };
      console.log(data);
      if (state.common_option == "create") {
        form.value.validate((valid) => {
          if (valid) {
            ctx.$http
              .post("/tanxiaji/customer/create/", {
                data: JSON.stringify(data),
              })
              .then((res) => {
                if (res.errno == 0) {
                  ElNotification.success(res.errmsg);
                  getOrderlist();
                  state.new_dialogVisible = false;
                }
              })
              .catch((err) => {
                ElNotification.error(err);
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        console.log("编辑");
        state.new_dialogVisible = false;
      }
    }
    // 请求页面数据
    function getOrderlist() {
      ctx.$http
        .get("/tanxiaji/get_customer_list/", {
          page: state.page,
          status: state.status,
          agent_id: state.agent_id,
          manager_id: state.manager_id,
          operation_id: state.operation_id,
          area_id: state.area_id,
          warehouse_id: state.warehouse_id,
          tag_id: state.tag_id,
          store_type: state.store_type,
          enter_process_status: state.enter_process_status,
          rank_by_time: state.rank_by_time,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.storeData = res.data.customer_list;
            state.totalPage = res.data.total_page_num;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取页面一些配置下拉
    function get_page_select_info() {
      ctx.$http
        .get("/tanxiaji/customer/selection/")
        .then((res) => {
          if (res.errno == 0) {
            state.ralate_ware = res.data.warehouse_list;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 分页
    function changePage(e) {
      state.page = e;
      getOrderlist();
    }
    // 请求客户经理
    function get_customer_list() {
      ctx.$http
        .get("/tanxiaji/get_create_customer_info/")
        .then((res) => {
          if (res.errno == 0) {
            state.run_manager_list = res.data.sale_manager;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取省份
    function get_province() {
      ctx.$http
        .get("/tanxiaji/addr/get_area/", {
          area_id: "",
        })
        .then((res) => {
          if (res.errno == 0) {
            state.set_form.provinceArr = res.data;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 修改省
    function changeProvince(e) {
      ctx.$http
        .get("/tanxiaji/addr/get_area/", {
          area_id: e,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.set_form.city = "";
            state.set_form.cityArr = res.data;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 修改城市
    function changeCity(e) {
      ctx.$http
        .get("/tanxiaji/addr/get_area/", {
          area_id: e,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.set_form.district = "";
            state.set_form.districtArr = res.data;
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 编辑
    function editRow(item) {
      state.common_option = "edit";
      console.log(item);
      state.new_dialogVisible = true;
      let {
        contract_num,
        shop_name,
        clientno,
        customer_phone,
        warehouse_id,
        limit_date,
      } = item;
      state.set_form.contractNum = "";
      state.set_form.store_name = shop_name;
      state.set_form.store_serial = clientno;
      state.set_form.shop_name = shop_name;
      state.set_form.contact_phone = customer_phone;
      state.set_form.shop_type = "";
      state.set_form.run_manager_id = "";
      state.set_form.expire_date = limit_date;
      state.set_form.ralate_ware = warehouse_id;
    }
    // 删除门店
    function deleteStore(e) {
      let id = e.id;
      if (confirm("是否要删除")) {
        ctx.$http
          .post("/tanxiaji/customer/forbid/", {
            customer_id: id,
          })
          .then((res) => {
            if (res.errno == 0) {
              ElNotification.success(res.errmsg);
              getOrderlist();
            }
          })
          .catch((err) => {
            ElNotification.error(err);
          });
      }
    }
    onMounted(() => {
      getOrderlist();
      get_page_select_info();
      get_customer_list();
      get_province();
      changeCity();
    });
    // 创建仓库
    return {
      changeProvince,
      changeCity,
      form,
      deleteStore,
      state,
      editRow,
      detailRow,
      deleteRow,
      new_set_ware,
      close,
      create_ware,
      getOrderlist,
      dateChange,
      changePage,
      optionBtn,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  // height: 100%;
  .el-card {
    // height: 100%;
    .rowDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .row-left {
        display: flex;
        width: 60%;
        justify-content: space-between;
        .row-item {
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }
      .row-right {
        width: 20%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
    .el-select {
      width: 100%;
    }
    /deep/ .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
  }
}
</style>